<template>
  <div class="sys-page">
    <el-button
      type="success"
      @click="refresh()"
      round
      style="float:right; margin-top:10px;"
      icon="el-icon-refresh"
    >刷新</el-button>
    <app-title :title="dialogTitle"></app-title>

    <el-collapse>
      <el-collapse-item>
        <template slot="title">
          <span style="font-size:20px;color:orange;">搜索</span>
          <i class="header-icon el-icon-search"></i>
        </template>

        <app-search style=" display:flex; width:100%;">
          <el-form :inline="true" :model="searchForm" :rules="addRules" ref="searchForm">
            <el-form-item label="六合一命令状态查询" prop="command_zt">
              <el-input v-model="searchForm.command_zt" placeholder="请输入命令状态"></el-input>
            </el-form-item>

            <el-form-item label="命令类型查询" prop="command_lx">
              <el-input v-model="searchForm.command_lx" placeholder="请输入命令类型"></el-input>
            </el-form-item>

            <el-form-item>
              <div class="block">
                <el-date-picker
                  v-model="value6"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-delete" @click="reset">清空</el-button>
              <el-button id="zcc" type="primary" @click="search" :disabled="disButton">查询</el-button>
            </el-form-item>
          </el-form>
        </app-search>
      </el-collapse-item>
    </el-collapse>
    <el-row>
      <el-col style="width: 100%" :span="20">
        <el-table v-loading="loading" stripe :data="tableData" :row-class-name="tableRowClassName">
          <el-table-column label="操作终端ID" width="180" prop="terminalID"></el-table-column>

          <el-table-column label="操作用户ID" width="auto" prop="userID"></el-table-column>

          <el-table-column label="操作时间" width="auto" prop="operatingTiem"></el-table-column>

          <el-table-column label="操作命令" width="auto" prop="operatingzt"></el-table-column>

          <el-table-column label="六合一接口同步状态" width="auto" prop="Synchronize"></el-table-column>

          <el-table-column label="非税系统同步状态" width="auto" prop="non-tax"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.el-table .warning-row {
  background: #f08080;
}

.el-table .success-row {
  background: #f0f9eb;
}
.block {
  width: 100%;
  text-align: center;
}
</style>

<script>
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      var pattern = /^[\u4e00-\u9fa5]{0,}$/
      if (value === '') {
        this.disButton = true
        callback(new Error('搜索不能为空'))
      } else if (!pattern.test(value)) {
        this.disButton = true
        callback(new Error('搜索不为允许中文或特殊符号'))
      } else {
        this.disButton = false
      }
    }
    return {
      picurl: window.axios_g.BASEURL,
      dialogTitle: "数据同步情况查询",
      loading: false,
      picpath: '',
      tableDataTemp: [],
      tableData: [],
      errorMsg: "您的信息有误，请联系管理员修改",
      reliable: true,
      value6: '',
      disButton: false,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      searchForm: {
        command_zt: '',
        command_lx: ''
      },

      addRules: {
        command_zt: [
          { required: true, validator: validateUser, trigger: 'change' }
        ],
        command_lx: [
          { required: true, validator: validateUser, trigger: 'change' }
        ]
      }

    }
  },
  mounted() {
    this.query()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (this.reliable === false) {
        return 'warning-row';
      } else {
        return 'success-row'
      }
    },

    //每页显示数据量变更
    handleSizeChange: function (val) {
      this.HTTP.methods.apiGet("",val).then(res => {
            if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
        } else {
          this.tableData = res.data
          this.pageSize = val
        }
      }) 
    },
    //页码变更
    handleCurrentChange: function (val) {
           this.HTTP.methods.apiGet("",val).then(res => {
            if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
        } else {
          this.tableData = res.data
          this.pageNum = val
        }
      }) 
    },

    reset() {
      this.searchForm.command_zt = ''
      this.searchForm.command_lx = ''
      this.value6 = null
    },

    query() {
            let page = {
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }
      this.HTTP.methods.apiGet("http://rap2api.taobao.org/app/mock/123866/huoqu",page).then(res => {
        if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
          console.log(res)
        } else {
          console.log(res)
          this.tableData = (res.data)
          this.totalCount = this.tableData.length
          // 模拟分页，后面需要修改
          this.tableData = this.tableData.slice(0, 10)

        }
      })
    },
    refresh() {
      this.query()
    },
    search() {
      console.log(this.searchForm.command_zt)
      this.HTTP.methods.apsiPost().them(res => {
        if (res.code != 200) {

        } else {
          console.log(res)
        }
      })
      // this.$axios({
      //     url: '/get_realname',
      //     method: 'get',
      // }).then(res => {
      //    conslo.log(res)
      // }).catch(err => {
      //     console.warn(`获取数据失败。${err}`)
      // })           
    }
  }
}
</script>

    
